import React, { Component } from 'react'

import classnames from 'classnames'

/*
    1. 安装： cnpm i classnames
    2. 导入: import classnames from 'classnames'
    3. 使用  classnames 函数定义 class
    const divClass = classnames({
        content: true,
        active: this.state.flag,
        box: !this.state.flag
    })
    4. 在标签中使用我们定义的 class
*/ 

export default class App extends Component {

    state = {
        flag: true
    }

  render() {

    // 定义动态可变的 class
    const divClass = classnames({
        content: true,
        active: this.state.flag,
        box: !this.state.flag
    })

    return (
      <>
      <div className={divClass}>App</div>
      <button onClick={()=>{
        this.setState({
            flag: !this.state.flag
        })
      }}>求点击</button>
      </>
    )
  }
}
